[Discover-next] Add search bar extensions #6894

joshuali925 · 2024-06-03T18:18:35Z

Description

A search bar extension can display a UI component above the query bar. The component has the ability to read and write discover search bar states to enhance the search experience for users. The configuration is part of Query Enhancements.

export interface SearchBarExtensionDependencies {
  /**
   * Currently selected index patterns.
   */
  indexPatterns?: IIndexPattern[];
}

export interface SearchBarExtensionConfig {
  /**
   * The id for the search bar extension.
   */
  id: string;
  /**
   * Lower order indicates higher position on UI.
   */
  order: number;
  /**
   * A function that determines if the search bar extension is enabled and should be rendered on UI.
   * @returns whether the extension is enabled.
   */
  isEnabled: () => Promise<boolean>;
  /**
   * A function that returns the mount point for the search bar extension.
   * @param dependencies - The dependencies required for the extension.
   * @returns The mount point for the search bar extension.
   */
  getComponent: (dependencies: SearchBarExtensionDependencies) => React.ReactElement;
}

export interface QueryEnhancement {
  ...
  searchBar?: {
    ...
    extensions?: SearchBarExtensionConfig[];
  };
}

Issues Resolved

Developers can utilize search bar extensions to add additional features to the search bar, such as query assist.

Part of #6820

Screenshot

Testing the changes

Changelog

Check List

All tests pass
- yarn test:jest
- yarn test:jest_integration
New functionality includes testing.
New functionality has been documented.
Update CHANGELOG.md
Commits are signed per the DCO using --signoff

github-actions · 2024-06-03T18:19:14Z

ℹ️ Manual Changeset Creation Reminder

Please ensure manual commit for changeset file 6894.yml under folder changelogs/fragments to complete this PR.

If you want to use the available OpenSearch Changeset Bot App to avoid manual creation of changeset file you can install it in your forked repository following this link.

For more information about formatting of changeset files, please visit OpenSearch Auto Changeset and Release Notes Tool.

github-actions · 2024-06-03T18:19:17Z

❌ Changeset File Not Added Yet

Please ensure manual commit for changeset file 6894.yml under folder changelogs/fragments to complete this PR. File still missing.

codecov · 2024-06-03T18:52:00Z

Codecov Report

Attention: Patch coverage is 79.16667% with 5 lines in your changes missing coverage. Please review.

Please upload report for BASE (feature/discover-next@2f8e559). Learn more about missing BASE report.

Files	Patch %	Lines
...c/plugins/data/public/ui/search_bar/search_bar.tsx	40.00%	1 Missing and 2 partials ⚠️
src/plugins/data/public/plugin.ts	0.00%	1 Missing ⚠️
...ui/search_bar_extensions/search_bar_extensions.tsx	90.90%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@                   Coverage Diff                    @@
##             feature/discover-next    #6894   +/-   ##
========================================================
  Coverage                         ?   67.02%           
========================================================
  Files                            ?     3451           
  Lines                            ?    68206           
  Branches                         ?    11138           
========================================================
  Hits                             ?    45712           
  Misses                           ?    19873           
  Partials                         ?     2621

Flag	Coverage Δ
Linux_4	`34.81% <0.00%> (?)`
Windows_1	`33.08% <0.00%> (?)`
Windows_2	`55.08% <ø> (?)`
Windows_3	`44.79% <79.16%> (?)`
Windows_4	`34.81% <0.00%> (?)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Signed-off-by: Joshua Li <[email protected]>

This reverts commit 0e8c681772d600569baad169dd9d8901b8bfabd1.

Signed-off-by: Joshua Li <[email protected]>

kavilla · 2024-06-04T20:47:05Z

src/plugins/data/public/ui/search_bar/search_bar.tsx

@@ -239,6 +243,15 @@ class SearchBarUI extends Component<SearchBarProps, State> {
    );
  }

+  private shouldRenderExtensions() {


kavilla · 2024-06-04T20:48:36Z

src/plugins/data/public/ui/search_bar/search_bar.tsx

+    }
+
+    let searchBarExtensions;
+    if (this.shouldRenderExtensions() && this.queryEditorRef.current) {


nit: do you think it's worth to shove this into the query editor top row?

kavilla · 2024-06-04T20:49:23Z

src/plugins/data/public/ui/search_bar/search_bar.tsx

@@ -521,6 +548,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
    return (
      <div className={className} data-test-subj="globalQueryBar">
        {queryBar}
+        {searchBarExtensions}


along with: https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6894/files#r1626586752, then we just have queryEditor here. i think probably because i didn't have the query editor work done while you working on this. and i promised i would clean it up but not sure if i will have the time. so if you rather keep this here for now for this pr and then a fast follow to clean it up that's cool.

that is if you think it makes sense to put the extensions in the query editor top row.

kavilla · 2024-06-04T20:54:35Z

src/plugins/data/public/index.ts

@@ -527,3 +527,6 @@ export {
  DataSourceGroup,
  DataSourceOption,
 } from './data_sources/datasource_selector';
+
+export { SuggestionsComponent } from './ui';


might be related to another PR. but for this could this be just apart of the ui service:

OpenSearch-Dashboards/src/plugins/data/public/ui/ui_service.ts

Line 64 in 830664c

SearchBar,

if it's not already accessible?

kavilla · 2024-06-04T20:58:12Z

src/plugins/data/public/ui/query_editor/query_editor.tsx

@@ -521,6 +519,7 @@ export default class QueryEditorUI extends Component<Props, State> {
              </EuiFlexGroup>
            </EuiFlexItem>
            <EuiFlexItem onClick={this.onClickInput} grow={true}>
+              <div ref={this.props.queryEditorRef} />


nit: can this be renamed to like queryEditorHeaderRef? to avoid confusion. I'm fine with this name as well since we can think of this and the code editor the same items essentially.

do we want to add a class and styling on this div as well?

two things we should consider adding is a max-height and overflow scroll to restrict how long this could get based what is being portal'd in

kavilla · 2024-06-04T21:10:23Z

Offline. Will merge as is and then do a fast follow

@returns

A search bar extension can display a UI component above the query bar. The component has the ability to read and write discover search bar states to enhance the search experience for users. The configuration is part of Query Enhancements. ```ts export interface SearchBarExtensionDependencies { /** * Currently selected index patterns. */ indexPatterns?: IIndexPattern[]; } export interface SearchBarExtensionConfig { /** * The id for the search bar extension. */ id: string; /** * Lower order indicates higher position on UI. */ order: number; /** * A function that determines if the search bar extension is enabled and should be rendered on UI. * @returns whether the extension is enabled. */ isEnabled: () => Promise<boolean>; /** * A function that returns the mount point for the search bar extension. * @param dependencies - The dependencies required for the extension. * @returns The mount point for the search bar extension. */ getComponent: (dependencies: SearchBarExtensionDependencies) => React.ReactElement; } export interface QueryEnhancement { ... searchBar?: { ... extensions?: SearchBarExtensionConfig[]; }; } Signed-off-by: Joshua Li <[email protected]>

joshuali925 · 2024-06-05T22:05:48Z

thanks, most comments were addressed in 9c09135, any remaining ones i'll open a PR today

@returns

A search bar extension can display a UI component above the query bar. The component has the ability to read and write discover search bar states to enhance the search experience for users. The configuration is part of Query Enhancements. ```ts export interface SearchBarExtensionDependencies { /** * Currently selected index patterns. */ indexPatterns?: IIndexPattern[]; } export interface SearchBarExtensionConfig { /** * The id for the search bar extension. */ id: string; /** * Lower order indicates higher position on UI. */ order: number; /** * A function that determines if the search bar extension is enabled and should be rendered on UI. * @returns whether the extension is enabled. */ isEnabled: () => Promise<boolean>; /** * A function that returns the mount point for the search bar extension. * @param dependencies - The dependencies required for the extension. * @returns The mount point for the search bar extension. */ getComponent: (dependencies: SearchBarExtensionDependencies) => React.ReactElement; } export interface QueryEnhancement { ... searchBar?: { ... extensions?: SearchBarExtensionConfig[]; }; } Signed-off-by: Joshua Li <[email protected]> (cherry picked from commit e748e81)

@returns

### Description see #6894 This PR picks #6894, #6895, #6933, #6972 to main. Additionally, - separates extensions from query enhancements - adds banner support - partially revert #6972 as it's pending on the data source commit to main - renames search bar extension to query editor extension A query editor extension can display a UI component above the query editor and/or a banner above the language selector. The component has the ability to read and write discover search bar states to enhance the search experience for users. The configuration is part of UI Enhancements. ```ts export interface QueryEditorExtensionDependencies { /** * Currently selected index patterns. */ indexPatterns?: Array<IIndexPattern | string>; /** * Currently selected data source. */ dataSource?: DataSource; /** * Currently selected query language. */ language: string; } export interface QueryEditorExtensionConfig { /** * The id for the search bar extension. */ id: string; /** * Lower order indicates higher position on UI. */ order: number; /** * A function that determines if the search bar extension is enabled and should be rendered on UI. * @returns whether the extension is enabled. */ isEnabled: (dependencies: QueryEditorExtensionDependencies) => Promise<boolean>; /** * A function that returns the search bar extension component. The component * will be displayed on top of the query editor in the search bar. * @param dependencies - The dependencies required for the extension. * @returns The component the search bar extension. */ getComponent?: (dependencies: QueryEditorExtensionDependencies) => React.ReactElement | null; /** * A function that returns the search bar extension banner. The banner is a * component that will be displayed on top of the search bar. * @param dependencies - The dependencies required for the extension. * @returns The component the search bar extension. */ getBanner?: (dependencies: QueryEditorExtensionDependencies) => React.ReactElement | null; } export interface UiEnhancements { query?: QueryEnhancement; + queryEditorExtension?: QueryEditorExtensionConfig; } ``` Developers can utilize search bar extensions to add additional features to the search bar, such as query assist. Issues resolved: #6077 A search bar extension can display a UI component above the query bar. The component has the ability to read and write discover search bar states to enhance the search experience for users. The configuration is part of Query Enhancements. Signed-off-by: Joshua Li <[email protected]>

@returns

### Description see #6894 This PR picks #6894, #6895, #6933, #6972 to main. Additionally, - separates extensions from query enhancements - adds banner support - partially revert #6972 as it's pending on the data source commit to main - renames search bar extension to query editor extension A query editor extension can display a UI component above the query editor and/or a banner above the language selector. The component has the ability to read and write discover search bar states to enhance the search experience for users. The configuration is part of UI Enhancements. ```ts export interface QueryEditorExtensionDependencies { /** * Currently selected index patterns. */ indexPatterns?: Array<IIndexPattern | string>; /** * Currently selected data source. */ dataSource?: DataSource; /** * Currently selected query language. */ language: string; } export interface QueryEditorExtensionConfig { /** * The id for the search bar extension. */ id: string; /** * Lower order indicates higher position on UI. */ order: number; /** * A function that determines if the search bar extension is enabled and should be rendered on UI. * @returns whether the extension is enabled. */ isEnabled: (dependencies: QueryEditorExtensionDependencies) => Promise<boolean>; /** * A function that returns the search bar extension component. The component * will be displayed on top of the query editor in the search bar. * @param dependencies - The dependencies required for the extension. * @returns The component the search bar extension. */ getComponent?: (dependencies: QueryEditorExtensionDependencies) => React.ReactElement | null; /** * A function that returns the search bar extension banner. The banner is a * component that will be displayed on top of the search bar. * @param dependencies - The dependencies required for the extension. * @returns The component the search bar extension. */ getBanner?: (dependencies: QueryEditorExtensionDependencies) => React.ReactElement | null; } export interface UiEnhancements { query?: QueryEnhancement; + queryEditorExtension?: QueryEditorExtensionConfig; } ``` Developers can utilize search bar extensions to add additional features to the search bar, such as query assist. Issues resolved: #6077 A search bar extension can display a UI component above the query bar. The component has the ability to read and write discover search bar states to enhance the search experience for users. The configuration is part of Query Enhancements. Signed-off-by: Joshua Li <[email protected]> (cherry picked from commit 4f54049) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

@returns

### Description see #6894 This PR picks #6894, #6895, #6933, #6972 to main. Additionally, - separates extensions from query enhancements - adds banner support - partially revert #6972 as it's pending on the data source commit to main - renames search bar extension to query editor extension A query editor extension can display a UI component above the query editor and/or a banner above the language selector. The component has the ability to read and write discover search bar states to enhance the search experience for users. The configuration is part of UI Enhancements. ```ts export interface QueryEditorExtensionDependencies { /** * Currently selected index patterns. */ indexPatterns?: Array<IIndexPattern | string>; /** * Currently selected data source. */ dataSource?: DataSource; /** * Currently selected query language. */ language: string; } export interface QueryEditorExtensionConfig { /** * The id for the search bar extension. */ id: string; /** * Lower order indicates higher position on UI. */ order: number; /** * A function that determines if the search bar extension is enabled and should be rendered on UI. * @returns whether the extension is enabled. */ isEnabled: (dependencies: QueryEditorExtensionDependencies) => Promise<boolean>; /** * A function that returns the search bar extension component. The component * will be displayed on top of the query editor in the search bar. * @param dependencies - The dependencies required for the extension. * @returns The component the search bar extension. */ getComponent?: (dependencies: QueryEditorExtensionDependencies) => React.ReactElement | null; /** * A function that returns the search bar extension banner. The banner is a * component that will be displayed on top of the search bar. * @param dependencies - The dependencies required for the extension. * @returns The component the search bar extension. */ getBanner?: (dependencies: QueryEditorExtensionDependencies) => React.ReactElement | null; } export interface UiEnhancements { query?: QueryEnhancement; + queryEditorExtension?: QueryEditorExtensionConfig; } ``` Developers can utilize search bar extensions to add additional features to the search bar, such as query assist. Issues resolved: #6077 A search bar extension can display a UI component above the query bar. The component has the ability to read and write discover search bar states to enhance the search experience for users. The configuration is part of Query Enhancements. (cherry picked from commit 4f54049) Signed-off-by: Joshua Li <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

@returns

### Description see opensearch-project#6894 This PR picks opensearch-project#6894, opensearch-project#6895, opensearch-project#6933, opensearch-project#6972 to main. Additionally, - separates extensions from query enhancements - adds banner support - partially revert opensearch-project#6972 as it's pending on the data source commit to main - renames search bar extension to query editor extension A query editor extension can display a UI component above the query editor and/or a banner above the language selector. The component has the ability to read and write discover search bar states to enhance the search experience for users. The configuration is part of UI Enhancements. ```ts export interface QueryEditorExtensionDependencies { /** * Currently selected index patterns. */ indexPatterns?: Array<IIndexPattern | string>; /** * Currently selected data source. */ dataSource?: DataSource; /** * Currently selected query language. */ language: string; } export interface QueryEditorExtensionConfig { /** * The id for the search bar extension. */ id: string; /** * Lower order indicates higher position on UI. */ order: number; /** * A function that determines if the search bar extension is enabled and should be rendered on UI. * @returns whether the extension is enabled. */ isEnabled: (dependencies: QueryEditorExtensionDependencies) => Promise<boolean>; /** * A function that returns the search bar extension component. The component * will be displayed on top of the query editor in the search bar. * @param dependencies - The dependencies required for the extension. * @returns The component the search bar extension. */ getComponent?: (dependencies: QueryEditorExtensionDependencies) => React.ReactElement | null; /** * A function that returns the search bar extension banner. The banner is a * component that will be displayed on top of the search bar. * @param dependencies - The dependencies required for the extension. * @returns The component the search bar extension. */ getBanner?: (dependencies: QueryEditorExtensionDependencies) => React.ReactElement | null; } export interface UiEnhancements { query?: QueryEnhancement; + queryEditorExtension?: QueryEditorExtensionConfig; } ``` Developers can utilize search bar extensions to add additional features to the search bar, such as query assist. Issues resolved: opensearch-project#6077 A search bar extension can display a UI component above the query bar. The component has the ability to read and write discover search bar states to enhance the search experience for users. The configuration is part of Query Enhancements. Signed-off-by: Joshua Li <[email protected]>

joshuali925 changed the title ~~[Discover] Add search bar extensions~~ [Discover-next] Add search bar extensions Jun 3, 2024

github-actions bot added the first-time-contributor label Jun 3, 2024

github-actions bot added the failed changeset label Jun 3, 2024

joshuali925 force-pushed the feature/search-extensions branch from 50f69ae to ac9316a Compare June 3, 2024 18:21

joshuali925 mentioned this pull request Jun 3, 2024

[Discover-next] add query assist to query enhancements plugin #6895

Merged

7 tasks

kavilla force-pushed the feature/discover-next branch from 5b180dc to cb6ab68 Compare June 3, 2024 20:13

joshuali925 added 2 commits June 4, 2024 10:24

add apply query trigger

ee51bce

Signed-off-by: Joshua Li <[email protected]>

Revert "add apply query trigger"

0589b24

This reverts commit 0e8c681772d600569baad169dd9d8901b8bfabd1.

joshuali925 force-pushed the feature/search-extensions branch from ac9316a to 40f323f Compare June 4, 2024 19:18

add search bar extensions

04661f7

Signed-off-by: Joshua Li <[email protected]>

joshuali925 force-pushed the feature/search-extensions branch from 40f323f to 04661f7 Compare June 4, 2024 19:52

joshuali925 marked this pull request as ready for review June 4, 2024 20:15

joshuali925 requested review from ananzh, kavilla, AMoo-Miki, ashwin-pc, joshuarrrr, abbyhu2000, zengyan-amazon, zhongnansu, manasvinibs, ZilongX, Flyingliuhub, curq, bandinib-amzn, SuZhou-Joe and ruanyl as code owners June 4, 2024 20:15

joshuali925 requested review from BionIT, xinruiba, zhyuanqi and mengweieric as code owners June 4, 2024 20:15

kavilla reviewed Jun 4, 2024

View reviewed changes

kavilla approved these changes Jun 4, 2024

View reviewed changes

kavilla merged commit 616ec2a into opensearch-project:feature/discover-next Jun 4, 2024
39 of 65 checks passed

joshuali925 mentioned this pull request Jun 5, 2024

[Discover-next] Address comments for search bar extensions and query assist #6933

Merged

7 tasks

joshuali925 mentioned this pull request Jun 14, 2024

[Discover-next] Add query editor extensions #7034

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Discover-next] Add search bar extensions #6894

[Discover-next] Add search bar extensions #6894

joshuali925 commented Jun 3, 2024

github-actions bot commented Jun 3, 2024

github-actions bot commented Jun 3, 2024

codecov bot commented Jun 3, 2024 •

edited

Loading

kavilla Jun 4, 2024

kavilla Jun 4, 2024

kavilla Jun 4, 2024 •

edited

Loading

kavilla Jun 4, 2024

kavilla Jun 4, 2024

kavilla Jun 4, 2024

kavilla commented Jun 4, 2024

joshuali925 commented Jun 5, 2024

[Discover-next] Add search bar extensions #6894

[Discover-next] Add search bar extensions #6894

Conversation

joshuali925 commented Jun 3, 2024

Description

Issues Resolved

Screenshot

Testing the changes

Changelog

Check List

github-actions bot commented Jun 3, 2024

ℹ️ Manual Changeset Creation Reminder

github-actions bot commented Jun 3, 2024

❌ Changeset File Not Added Yet

codecov bot commented Jun 3, 2024 • edited Loading

Codecov Report

kavilla Jun 4, 2024

Choose a reason for hiding this comment

kavilla Jun 4, 2024

Choose a reason for hiding this comment

kavilla Jun 4, 2024 • edited Loading

Choose a reason for hiding this comment

kavilla Jun 4, 2024

Choose a reason for hiding this comment

kavilla Jun 4, 2024

Choose a reason for hiding this comment

kavilla Jun 4, 2024

Choose a reason for hiding this comment

kavilla commented Jun 4, 2024

joshuali925 commented Jun 5, 2024

codecov bot commented Jun 3, 2024 •

edited

Loading

kavilla Jun 4, 2024 •

edited

Loading